<template>
  <div>
    <div>
      <el-row :gutter="15">
        <el-col :span="8">
          <div class="grid-content">
            <el-input placeholder="输入关键字" v-model="input"></el-input>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content">
            <el-button class="check" @click="clickByWord">查询</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content"></div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content">
            <el-button class="new" @click="dialogVisibleNew = true">新建</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-table
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data="tableData"
      with
      style=" table"
    >
      <el-table-column prop="number" label="序号">
        <template slot-scope="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="角色名称"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <el-button type="text">删除</el-button>
        <el-button type="text" @click="dialogVisibleEdit= true">编辑</el-button>
        <el-button type="text" @click="dialogVisibleCheck= true">查看</el-button>
      </el-table-column>
    </el-table>
    <!--新建对话框-->
    <el-dialog
      custom-class="self-dialog"
      title="新建"
      :visible.sync="dialogVisibleNew"
      width="30%"
      modal
    >
      <el-form :model="formNew" :rules="rules" ref="formNew" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="formNew.roleName" placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <div style="margin-bottom: 20px">权限配置</div>
        <el-checkbox
          v-model="bigScreen.bigScreenAuthAll"
          @change="handleBigScreenAuthAllChange"
        >大屏权限</el-checkbox>
        <div style="height:10px"></div>
        <el-checkbox-group
          v-model="bigScreen.bigScreenAuthList"
          @change="handleCheckedBigScreenChange"
          style="margin-left: 20px"
        >
          <el-checkbox label="校级大屏">校级大屏</el-checkbox>
          <el-checkbox label="区级大屏">区级大屏</el-checkbox>
          <el-checkbox label="市级大屏">市级大屏</el-checkbox>
        </el-checkbox-group>

        <el-checkbox
          v-model="schoolAuth.schoolAuthAll"
          @change="handleSchoolAuthAllChange"
          style="margin-top: 15px"
        >校园权限</el-checkbox>
        <div style="margin:10px;display:grid;grid-template-columns:1fr 1fr 1fr">
          <ul>
            <el-checkbox
              v-model="schoolAuth.auth1.schoolAllAuth1"
              @change="handleChangeSchoolAllAuth1"
            >人员管理</el-checkbox>
            <el-checkbox-group
              v-model="schoolAuth.auth1.schoolListAuth1"
              @change="handleChangeSchoolAuth1"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看1">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护1">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>

          <ul>
            <el-checkbox
              v-model="schoolAuth.auth2.schoolAllAuth2"
              @change="handleChangeSchoolAllAuth2"
            >视频监控</el-checkbox>
            <el-checkbox-group
              v-model="schoolAuth.auth2.schoolListAuth2"
              @change="handleChangeSchoolAuth2"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看2">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护2">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>

          <ul>
            <el-checkbox
              v-model="schoolAuth.auth3.schoolAllAuth3"
              @change="handleChangeSchoolAllAuth3"
            >告警管理</el-checkbox>
            <el-checkbox-group
              v-model="schoolAuth.auth3.schoolListAuth3"
              @change="handleChangeSchoolAuth3"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看3">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护3">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>
          <ul>
            <el-checkbox
              v-model="schoolAuth.auth4.schoolAllAuth4"
              @change="handleChangeSchoolAllAuth4"
            >出入管理</el-checkbox>
            <el-checkbox-group
              v-model="schoolAuth.auth4.schoolListAuth4"
              @change="handleChangeSchoolAuth4"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看4">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护4">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>
          <ul>
            <el-checkbox
              v-model="schoolAuth.auth5.schoolAllAuth5"
              @change="handleChangeSchoolAllAuth5"
            >应急预案管理</el-checkbox>
            <el-checkbox-group
              v-model="schoolAuth.auth5.schoolListAuth5"
              @change="handleChangeSchoolAuth5"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看5">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护5">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>
          <ul>
            <el-checkbox
              v-model="schoolAuth.auth6.schoolAllAuth6"
              @change="handleChangeSchoolAllAuth6"
            >班级管理</el-checkbox>
            <el-checkbox-group
              v-model="schoolAuth.auth6.schoolListAuth6"
              @change="handleChangeSchoolAuth6"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看6">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护6">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>
          <ul>
            <el-checkbox
              v-model="schoolAuth.auth7.schoolAllAuth7"
              @change="handleChangeSchoolAllAuth7"
            >设备标准库</el-checkbox>
            <el-checkbox-group
              v-model="schoolAuth.auth7.schoolListAuth7"
              @change="handleChangeSchoolAuth7"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看7">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护7">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>

          <ul>
            <el-checkbox
              v-model="schoolAuth.auth8.schoolAllAuth8"
              @change="handleChangeSchoolAllAuth8"
            >班级管理</el-checkbox>
            <el-checkbox-group
              v-model="schoolAuth.auth8.schoolListAuth8"
              @change="handleChangeSchoolAuth8"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看8">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护8">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>
        </div>

        <el-checkbox
          v-model="sysSettingAuth.sysSettingAuthAll"
          @change="handleSysSettingAuthAllChange"
          style="margin-top: 15px"
        >系统设置</el-checkbox>
        <div style="margin:10px;display:grid;grid-template-columns:1fr 1fr 1fr">
          <ul>
            <el-checkbox
              v-model="sysSettingAuth.auth1.sysSettingAllAuth1"
              @change="handleChangeSysSettingAllAuth1"
            >机构管理</el-checkbox>
            <el-checkbox-group
              v-model="sysSettingAuth.auth1.sysSettingListAuth1"
              @change="handleChangeSysSettingAuth1"
              S
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看9">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护9">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>

          <ul>
            <el-checkbox
              v-model="sysSettingAuth.auth2.sysSettingAllAuth2"
              @change="handleChangeSysSettingAllAuth2"
            >用户管理</el-checkbox>
            <el-checkbox-group
              v-model="sysSettingAuth.auth2.sysSettingListAuth2"
              @change="handleChangeSysSettingAuth2"
              S
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看10">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护10">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>
          <ul>
            <el-checkbox
              v-model="sysSettingAuth.auth3.sysSettingAllAuth3"
              @change="handleChangeSysSettingAllAuth3"
            >用户管理</el-checkbox>
            <el-checkbox-group
              v-model="sysSettingAuth.auth3.sysSettingListAuth3"
              @change="handleChangeSysSettingAuth3"
              style="margin-left: 20px"
            >
              <li>
                <el-checkbox label="查看11">查看</el-checkbox>
              </li>
              <li>
                <el-checkbox label="维护11">维护</el-checkbox>
              </li>
            </el-checkbox-group>
          </ul>
        </div>
        <div style="text-align: center;margin-top: 20px">
          <el-button
            style="margin-right: 100px"
            @click="dialogVisibleNew=false;clearCheck()"
            plain
          >取 消</el-button>
          <el-button @click="newCreatConfirm" plain>确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 新建对话框 -->
    <!--编辑对话框-->
    <el-dialog
      custom-class="self-dialog"
      title="编辑"
      :visible.sync="dialogVisibleEdit"
      width="30%"
      modal
    >
      <el-form :model="formEdit" :rules="rules" ref="formEdit" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="formEdit.roleName" placeholder="单行输入"></el-input>
        </el-form-item>
        <el-button @click="clickReset('formEdit');dialogVisibleEdit=false" plain>取 消</el-button>
        <el-button @click="clickAddConfirm(formEdit);dialogVisibleEdit=false" plain>确 定</el-button>
      </el-form>
    </el-dialog>
    <!-- 新建对话框 -->
    <!--查看对话框-->
    <el-dialog
      custom-class="self-dialog"
      title="查看"
      :visible.sync="dialogVisibleCheck"
      width="30%"
      modal
    >
      <el-form :model="formCheck" :rules="rules" ref="formCheck" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="formCheck.roleName" placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createDate">
          <el-input v-model="formCheck.createDate" placeholder="单行输入"></el-input>
        </el-form-item>
        <el-button @click="clickReset('formCheck');dialogVisibleCheck=false" plain>取 消</el-button>
        <el-button @click="clickAddConfirm(formCheck);dialogVisibleCheck=false" plain>确 定</el-button>
      </el-form>
    </el-dialog>
    <!-- 查看对话框 -->
  </div>
</template>
<script>
import changeDate from "../../assets/js/changeDate";
export default {
  data() {
    return {
      dialogVisibleNew: false,
      dialogVisibleEdit: false,
      dialogVisibleCheck: false,
      checked: "",
      formNew: {
        roleName: "教导主任",
      },
      formEdit: {
        roleName: "教导主任",
      },
      formCheck: {
        roleName: "教导主任",
        createDate: "2020-05-09 16:57:21",
      },
      tableData: [
        {
          roleId: "",
          name: "",
          roleName: "",
          createTime: "",
        },
      ],
      input: "",
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
      bigScreen: {
        bigScreenAuthAll: false,
        bigScreenAuthList: [],
        allAuth: ["校级大屏", "区级大屏", "市级大屏"],
      },
      schoolAuth: {
        schoolAuthAll: false,
        schoolAuthList: [],
        schoolAllAuthList: ["查看1", "维护1"],
        auth1: {
          schoolAllAuth1: false,
          schoolListAuth1: [],
          allAuth: ["查看1", "维护1"],
        },
        auth2: {
          schoolAllAuth2: false,
          schoolListAuth2: [],
          allAuth: ["查看2", "维护2"],
        },
        auth3: {
          schoolAllAuth3: false,
          schoolListAuth3: [],
          allAuth: ["查看3", "维护3"],
        },
        auth4: {
          schoolAllAuth4: false,
          schoolListAuth4: [],
          allAuth: ["查看4", "维护4"],
        },
        auth5: {
          schoolAllAuth5: false,
          schoolListAuth5: [],
          allAuth: ["查看5", "维护5"],
        },
        auth6: {
          schoolAllAuth6: false,
          schoolListAuth6: [],
          allAuth: ["查看6", "维护6"],
        },
        auth7: {
          schoolAllAuth7: false,
          schoolListAuth7: [],
          allAuth: ["查看7", "维护7"],
        },
        auth8: {
          schoolAllAuth8: false,
          schoolListAuth8: [],
          allAuth: ["查看8", "维护8"],
        },
      },
      sysSettingAuth: {
        sysSettingAuthAll: false,
        sysSettingAuthList: [],
        sysSettingAllAuthList: [],
        auth1: {
          sysSettingAllAuth1: false,
          sysSettingListAuth1: [],
          allAuth: ["查看9", "维护9"],
        },
        auth2: {
          sysSettingAllAuth2: false,
          sysSettingListAuth2: [],
          allAuth: ["查看10", "维护10"],
        },
        auth3: {
          sysSettingAllAuth3: false,
          sysSettingListAuth3: [],
          allAuth: ["查看11", "维护11"],
        },
      },
    };
  },
  // 初始化显示所有用户
  mounted() {
    this.init();
  },
  methods: {
    // 显示所有用户
    init() {
      const _this = this;
      this.$axios.get("/api/role/findAll").then(function (resp) {
        console.log(resp);
        _this.tableData = resp.data.data;
        _this.tableData.forEach((item) => {
          item.createTime = changeDate(item.createTime);
        });
      });
    },
    // 根据关键字查询
    clickByWord() {
      this.$axios
        .get("/api/role/findByKeyWord", {
          params: {
            key: this.input,
          },
        })
        .then((res) => {
          if (res.data.status === 200) {
            console.log(res);
            let data = [];
            data.push(res.data.data);
            this.tableData = data;
          } else {
            this.$message.warning("查询失败");
          }
        });
    },
    //查看
    clickCheck(row) {
      //console.log(row)
      this.formCheck.name = row.name;
      this.formCheck.roleId = row.roleId;
      this.formCheck.createDate = row.createTime;
    },
    // 增加预案
    clickAddConfirm(form) {
      console.log(form);
      const _this = this;
      this.$axios
        .post(
          "/user/add",
          // 法1:
          form
          /* 法2：{
           planName: form.planName,
           manager: form.manager
         }

        */
        )
        .then(function (resp) {
          console.log(resp);
          _this.init();
        });
    },
    // 编辑预案
    clickEdit(id) {
      const _this = this;
      this.$axios.get("/user/findById/?userId=" + id).then(function (resp) {
        _this.formEdit.roleName = resp.data.data.roleName;
        _this.formEdit.createDate = resp.data.data.createDate;

        console.log(resp);
      });
    },
    // 编辑表单里的确定按钮
    clickEditConfirm(form) {
      console.log(form);
      const _this = this;
      this.$axios
        .post(
          "/user/update",
          // 法1：
          form
          /* 法2：
        {
          userId: form.userId,
          mobile: form.mobile,
        })
        法2 */
        )
        .then(function (resp) {
          console.log(resp);
          _this.init();
        });
    },
    // 新增表单和编辑表单的取消操作
    clickReset(formName) {
      this.$refs[formName].resetFields();
    },

    newCreatConfirm() {
      this.dialogVisibleNew = false;
      this.clearCheck();
    }, //新建角色确认按钮绑定
    /**
     * 大屏权限
     */
    handleBigScreenAuthAllChange(val) {
      this.bigScreen.bigScreenAuthList = val ? this.bigScreen.allAuth : [];
    },
    handleCheckedBigScreenChange(value) {
      let checkedCount = value.length;
      this.bigScreen.bigScreenAuthAll =
        checkedCount === this.bigScreen.allAuth.length;
    },

    // 校园权限
    handleSchoolAuthAllChange(val) {
      this.schoolAuth.auth1.schoolListAuth1 = val
        ? this.schoolAuth.auth1.allAuth
        : [];
      this.schoolAuth.auth2.schoolListAuth2 = val
        ? this.schoolAuth.auth2.allAuth
        : [];
      this.schoolAuth.auth3.schoolListAuth3 = val
        ? this.schoolAuth.auth3.allAuth
        : [];
      this.schoolAuth.auth4.schoolListAuth4 = val
        ? this.schoolAuth.auth4.allAuth
        : [];
      this.schoolAuth.auth5.schoolListAuth5 = val
        ? this.schoolAuth.auth5.allAuth
        : [];
      this.schoolAuth.auth6.schoolListAuth6 = val
        ? this.schoolAuth.auth6.allAuth
        : [];
      this.schoolAuth.auth7.schoolListAuth7 = val
        ? this.schoolAuth.auth7.allAuth
        : [];
      this.schoolAuth.auth8.schoolListAuth8 = val
        ? this.schoolAuth.auth8.allAuth
        : [];
      this.schoolAuth.auth1.schoolAllAuth1 = val;
      this.schoolAuth.auth2.schoolAllAuth2 = val;
      this.schoolAuth.auth3.schoolAllAuth3 = val;
      this.schoolAuth.auth4.schoolAllAuth4 = val;
      this.schoolAuth.auth5.schoolAllAuth5 = val;
      this.schoolAuth.auth6.schoolAllAuth6 = val;
      this.schoolAuth.auth7.schoolAllAuth7 = val;
      this.schoolAuth.auth8.schoolAllAuth8 = val;
      if (val) {
        this.schoolAuth.schoolAuthList = this.schoolAuth.schoolAuthList
          .concat(this.schoolAuth.auth1.allAuth)
          .concat(this.schoolAuth.auth2.allAuth)
          .concat(this.schoolAuth.auth3.allAuth)
          .concat(this.schoolAuth.auth4.allAuth)
          .concat(this.schoolAuth.auth5.allAuth)
          .concat(this.schoolAuth.auth6.allAuth)
          .concat(this.schoolAuth.auth7.allAuth)
          .concat(this.schoolAuth.auth8.allAuth);

        console.log(this.schoolAuth.schoolAuthList);
      } else {
        this.schoolAuth.schoolAuthList = [];
      }
    },

    handleChangeSchoolAllAuth1(val) {
      this.schoolAuth.auth1.schoolListAuth1 = val
        ? this.schoolAuth.auth1.allAuth
        : [];
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAuth1(value) {
      let checkedCount = value.length;
      this.schoolAuth.auth1.schoolAllAuth1 =
        checkedCount === this.schoolAuth.auth1.allAuth.length;
      this.isSchoolCheckAll();
    },

    handleChangeSchoolAllAuth2(val) {
      this.schoolAuth.auth2.schoolListAuth2 = val
        ? this.schoolAuth.auth2.allAuth
        : [];
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAuth2(value) {
      let checkedCount = value.length;
      this.schoolAuth.auth2.schoolAllAuth2 =
        checkedCount === this.schoolAuth.auth2.allAuth.length;
      this.isSchoolCheckAll();
    },

    handleChangeSchoolAllAuth3(val) {
      this.schoolAuth.auth3.schoolListAuth3 = val
        ? this.schoolAuth.auth3.allAuth
        : [];
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAuth3(value) {
      let checkedCount = value.length;
      this.schoolAuth.auth3.schoolAllAuth3 =
        checkedCount === this.schoolAuth.auth3.allAuth.length;
      this.isSchoolCheckAll();
    },

    handleChangeSchoolAllAuth4(val) {
      this.schoolAuth.auth4.schoolListAuth4 = val
        ? this.schoolAuth.auth4.allAuth
        : [];
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAuth4(value) {
      let checkedCount = value.length;
      this.schoolAuth.auth4.schoolAllAuth4 =
        checkedCount === this.schoolAuth.auth4.allAuth.length;
      this.isSchoolCheckAll();
    },

    handleChangeSchoolAllAuth5(val) {
      this.schoolAuth.auth5.schoolListAuth5 = val
        ? this.schoolAuth.auth5.allAuth
        : [];
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAuth5(value) {
      let checkedCount = value.length;
      this.schoolAuth.auth5.schoolAllAuth5 =
        checkedCount === this.schoolAuth.auth5.allAuth.length;
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAllAuth6(val) {
      this.schoolAuth.auth6.schoolListAuth6 = val
        ? this.schoolAuth.auth6.allAuth
        : [];
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAuth6(value) {
      let checkedCount = value.length;
      this.schoolAuth.auth6.schoolAllAuth6 =
        checkedCount === this.schoolAuth.auth6.allAuth.length;
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAllAuth7(val) {
      this.schoolAuth.auth7.schoolListAuth7 = val
        ? this.schoolAuth.auth7.allAuth
        : [];
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAuth7(value) {
      let checkedCount = value.length;
      this.schoolAuth.auth7.schoolAllAuth7 =
        checkedCount === this.schoolAuth.auth7.allAuth.length;
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAllAuth8(val) {
      this.schoolAuth.auth8.schoolListAuth8 = val
        ? this.schoolAuth.auth8.allAuth
        : [];
      this.isSchoolCheckAll();
    },
    handleChangeSchoolAuth8(value) {
      let checkedCount = value.length;
      this.schoolAuth.auth8.schoolAllAuth8 =
        checkedCount === this.schoolAuth.auth8.allAuth.length;
      this.isSchoolCheckAll();
    },

    /**
     * 系统设置
     */
    handleSysSettingAuthAllChange(val) {
      this.sysSettingAuth.auth1.sysSettingListAuth1 = val
        ? this.sysSettingAuth.auth1.allAuth
        : [];
      this.sysSettingAuth.auth2.sysSettingListAuth2 = val
        ? this.sysSettingAuth.auth2.allAuth
        : [];
      this.sysSettingAuth.auth3.sysSettingListAuth3 = val
        ? this.sysSettingAuth.auth3.allAuth
        : [];
      this.sysSettingAuth.auth1.sysSettingAllAuth1 = val;
      this.sysSettingAuth.auth2.sysSettingAllAuth2 = val;
      this.sysSettingAuth.auth3.sysSettingAllAuth3 = val;
      if (val) {
        this.sysSettingAuth.sysSettingAuthList = this.sysSettingAuth.sysSettingAuthList
          .concat(this.sysSettingAuth.auth1.allAuth)
          .concat(this.sysSettingAuth.auth2.allAuth)
          .concat(this.sysSettingAuth.auth3.allAuth);
      } else {
        this.sysSettingAuth.sysSettingAuthList = [];
      }
    },
    handleChangeSysSettingAllAuth1(val) {
      this.sysSettingAuth.auth1.sysSettingListAuth1 = val
        ? this.sysSettingAuth.auth1.allAuth
        : [];
      this.isSysSettingCheckAll();
    },
    handleChangeSysSettingAuth1(value) {
      let checkedCount = value.length;
      this.sysSettingAuth.auth1.sysSettingAllAuth1 =
        checkedCount === this.sysSettingAuth.auth1.allAuth.length;
      this.isSysSettingCheckAll();
    },
    handleChangeSysSettingAllAuth2(val) {
      this.sysSettingAuth.auth2.sysSettingListAuth2 = val
        ? this.sysSettingAuth.auth2.allAuth
        : [];
      this.isSysSettingCheckAll();
    },
    handleChangeSysSettingAuth2(value) {
      let checkedCount = value.length;
      this.sysSettingAuth.auth2.sysSettingAllAuth2 =
        checkedCount === this.sysSettingAuth.auth2.allAuth.length;
      this.isSysSettingCheckAll();
    },
    handleChangeSysSettingAllAuth3(val) {
      this.sysSettingAuth.auth3.sysSettingListAuth3 = val
        ? this.sysSettingAuth.auth3.allAuth
        : [];
      this.isSysSettingCheckAll();
    },
    handleChangeSysSettingAuth3(value) {
      let checkedCount = value.length;
      this.sysSettingAuth.auth3.sysSettingAllAuth3 =
        checkedCount === this.sysSettingAuth.auth3.allAuth.length;
      this.isSysSettingCheckAll();
    },
    isSchoolCheckAll() {
      if (
        this.schoolAuth.auth1.schoolAllAuth1 &&
        this.schoolAuth.auth2.schoolAllAuth2 &&
        this.schoolAuth.auth3.schoolAllAuth3 &&
        this.schoolAuth.auth4.schoolAllAuth4 &&
        this.schoolAuth.auth5.schoolAllAuth5 &&
        this.schoolAuth.auth6.schoolAllAuth6 &&
        this.schoolAuth.auth7.schoolAllAuth7 &&
        this.schoolAuth.auth8.schoolAllAuth8
      ) {
        this.schoolAuth.schoolAuthAll = true;
        this.schoolAuth.schoolAuthList.push(...this.schoolAuth.auth1.allAuth);
        this.schoolAuth.schoolAuthList.push(...this.schoolAuth.auth2.allAuth);
        this.schoolAuth.schoolAuthList.push(...this.schoolAuth.auth3.allAuth);
        this.schoolAuth.schoolAuthList.push(...this.schoolAuth.auth4.allAuth);
        this.schoolAuth.schoolAuthList.push(...this.schoolAuth.auth5.allAuth);
        this.schoolAuth.schoolAuthList.push(...this.schoolAuth.auth6.allAuth);
        this.schoolAuth.schoolAuthList.push(...this.schoolAuth.auth7.allAuth);
        this.schoolAuth.schoolAuthList.push(...this.schoolAuth.auth8.allAuth);
      } else {
        this.schoolAuth.schoolAuthAll = false;
      }
    },
    isSysSettingCheckAll() {
      if (
        this.sysSettingAuth.auth1.sysSettingAllAuth1 &&
        this.sysSettingAuth.auth2.sysSettingAllAuth2 &&
        this.sysSettingAuth.auth3.sysSettingAllAuth3
      ) {
        this.sysSettingAuth.sysSettingAuthAll = true;
        this.sysSettingAuth.sysSettingAuthList.push(
          ...this.sysSettingAuth.auth1.allAuth
        );
        this.sysSettingAuth.sysSettingAuthList.push(
          ...this.sysSettingAuth.auth2.allAuth
        );
        this.sysSettingAuth.sysSettingAuthList.push(
          ...this.sysSettingAuth.auth3.allAuth
        );
      } else {
        this.sysSettingAuth.sysSettingAuthAll = false;
      }
    },
    clearCheck() {
      this.bigScreen = {
        bigScreenAuthAll: false,
        bigScreenAuthList: [],
        allAuth: ["校级大屏", "区级大屏", "市级大屏"],
      };
      this.schoolAuth = {
        schoolAuthAll: false,
        schoolAuthList: [],
        schoolAllAuthList: ["查看1", "维护1"],
        auth1: {
          schoolAllAuth1: false,
          schoolListAuth1: [],
          allAuth: ["查看1", "维护1"],
        },
        auth2: {
          schoolAllAuth2: false,
          schoolListAuth2: [],
          allAuth: ["查看2", "维护2"],
        },
        auth3: {
          schoolAllAuth3: false,
          schoolListAuth3: [],
          allAuth: ["查看3", "维护3"],
        },
        auth4: {
          schoolAllAuth4: false,
          schoolListAuth4: [],
          allAuth: ["查看4", "维护4"],
        },
        auth5: {
          schoolAllAuth5: false,
          schoolListAuth5: [],
          allAuth: ["查看5", "维护5"],
        },
        auth6: {
          schoolAllAuth6: false,
          schoolListAuth6: [],
          allAuth: ["查看6", "维护6"],
        },
        auth7: {
          schoolAllAuth7: false,
          schoolListAuth7: [],
          allAuth: ["查看7", "维护7"],
        },
        auth8: {
          schoolAllAuth8: false,
          schoolListAuth8: [],
          allAuth: ["查看8", "维护8"],
        },
      };
      this.sysSettingAuth = {
        sysSettingAuthAll: false,
        sysSettingAuthList: [],
        sysSettingAllAuthList: [],
        auth1: {
          sysSettingAllAuth1: false,
          sysSettingListAuth1: [],
          allAuth: ["查看9", "维护9"],
        },
        auth2: {
          sysSettingAllAuth2: false,
          sysSettingListAuth2: [],
          allAuth: ["查看10", "维护10"],
        },
        auth3: {
          sysSettingAllAuth3: false,
          sysSettingListAuth3: [],
          allAuth: ["查看11", "维护11"],
        },
      };
    },
  },
};
</script>
<style scoped>
.el-dialog {
  height: 80vh;
}
.el-dialog__body {
  text-align: center;
}
.el-form {
  overflow: hidden;
}
.el-input {
  width: 300px;
}
.el-textarea {
  width: 200px;
}
#inputCheck {
  .el-input__inner {
    margin: 0;
    padding: 0;
    width: 400px;
  }
  .el-input--suffix,
  .el-input__inner {
    padding-right: 0px;
  }
  .el-input,
  .el-input--suffix {
    margin: 0;
    width: 40%;
    float: left;
    position: relative;
  }
  .input_ {
    position: relative;
    left: 0px;
  }
}

.el-table th.is-leaf {
  /* 去除上边框 */
  border: none;
}
.el-table::before {
  /* 去除下边框 */
  height: 0;
}
.el-table__row > td {
  /* 去除表格线 */
  border: none;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
html,
body {
  margin: 0;
  padding: 0;
}
.check {
  float: left;
  position: relative;
}
.new {
  float: right;
  position: relative;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
ul,
li {
  list-style: none;
}
</style>
